<template>
    <div
        class="dialog-select el-input"
        :class="`el-input--${$store.state.app.size}`"
    >
        <slot name="handler">
            <div
                :class="{ disabled }"
                class="el-input__inner dialog-select-input"
                @click="openDialog"
            >
                <!-- 多选 -->
                <div
                    v-if="multiple"
                    style="line-height: 1;padding: 2px 0;margin: 0 0 -2px -2px;"
                >
                    <el-tag
                        v-for="(item,index) in selectTitle"
                        :key="item[props.key]"
                        type="info"
                        style="margin:0 2px 2px 0"
                        closable
                        @close="tagClose(item,index)"
                    >
                        {{ item[props.title] }}
                    </el-tag>
                </div>
                <!-- 单选 -->
                <template v-else>
                    {{ selectTitle[props.title] || '' }}
                </template>
                <!-- 无数据时 -->
                <span
                    v-show="!deepBoolean(value)"
                    style="color: #c0c4cc;"
                    class="text"
                >{{ placeholder }}</span>
            </div>
        </slot>
        <el-dialog
            :visible.sync="dialogVisible"
            :title="dialogTitle"
            top="5vh"
            append-to-body
            class="select-dialog"
            width="523px"
        >
            <div v-loading="loading">
                <el-input
                    v-if="search"
                    :placeholder="searchPlaceholder"
                    v-model="apiParams.kw"
                    suffix-icon="el-icon-search"
                    @keyup.13.native="filterData"
                />
                <slot
                    :filterData="filterData"
                    name="filter"
                />
                <el-scrollbar class="ds-scroll">
                    <!-- 多选框组 -->
                    <el-checkbox-group
                        v-if="multiple"
                        v-model="selectKey"
                    >
                        <el-checkbox
                            v-for="(item,index) in dataList"
                            :label="item[props.key]"
                            :key="item[props.key]"
                            border
                            class="ds-select-item"
                            @change="(e)=>{
                                checkboxChange(item,index,e)
                        }"
                        >
                            <div class="item-wrapper">
                                <slot
                                    :item="item"
                                    :index="index"
                                />
                            </div>
                        </el-checkbox>
                    </el-checkbox-group>
                    <!-- 单选框组 -->
                    <el-radio-group
                        v-else
                        v-model="selectKey"
                        style="width: 100%"
                    >
                        <el-radio
                            v-for="(item,index) in dataList"
                            :label="item[props.key]"
                            :key="item[props.key]"
                            border
                            class="ds-select-item"
                            @change="(e)=>{
                                radioChange(item,index,e)
                        }"
                        >
                            <div class="item-wrapper">
                                <slot
                                    :item="item"
                                    :index="index"
                                />
                            </div>
                        </el-radio>
                    </el-radio-group>
                    <div
                        v-if="!total"
                        class="mini-des"
                        style="text-align: center; padding: 60px"
                    >
                        暂无数据
                    </div>
                </el-scrollbar>
                <el-pagination
                    :current-page.sync="apiParams.page"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="apiParams.limit"
                    :total="total"
                    style="margin-top: 10px"
                    layout="total, prev, pager, next"
                    @size-change="filterData"
                    @current-change="getPageData"
                />

            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    type="primary"
                    @click="dialogVisible = false"
                >确认</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
import { deepBoolean } from '@/utils'
/*
    props: {
        multiple: 是否多选，默认false
        value(v-model): Array->多选， Number, String-> 单选
        getListFn： 获取数据列表的方法
        props: 字段的配置
        valueTitle： value对应的title
     }
*/
export default {
	name: 'DialogSelect',
	props: {
		multiple: {
			type: Boolean,
			default: false
		},
		value: {
			type: [Number, String, Array],
			default: ''
		},
		getListFn: {
			type: Function,
			default() {
				return () => {}
			}
		},
		props: {
			type: Object,
			default() {
				return {
					key: 'id',
					title: 'title'
				}
			}
		},
		valueTitle: {
			type: [Array, Object],
			default() {
				return []
			}
		},
		dialogTitle: {
			type: String,
			default: 'Select'
		},
		searchPlaceholder: {
			type: String,
			default: 'keyword...'
		},
		placeholder: {
			type: String,
			default: 'Select...'
		},
		otherParams: {
			type: Object,
			default: () => ({})
		},
		search: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			apiParams: {
				page: 1,
				limit: 10,
				kw: '',
				...this.otherParams
			},
			selectTitle: this.valueTitle,
			dialogVisible: false,
			dataList: [],
			total: 0,
			selectKey: this.value,
			loading: false
		}
	},
	watch: {
		valueTitle(val) {
			if (val !== this.selectTitle) {
				this.selectTitle = val
			}
		},
		value(val) {
			if (val !== this.selectKey) {
				this.selectKey = val
			}
		}
	},
	created() {},
	methods: {
		deepBoolean,
		getPageData() {
			let params = {}
			params = Object.assign(this.apiParams, this.otherParams)
			for (const x in params) {
				if (params[x] === '') {
					delete params[x]
				}
			}
			this.loading = true
			this.getListFn(params)
				.then((res) => {
					this.loading = false
					if (res.err_code === 0) {
						this.dataList = res.data.items
						this.total = res.data.row_total
					} else {
						this.message.error(res.err_msg)
					}
				})
				.catch((_) => {
					this.loading = false
				})
		},
		filterData(otherKey = null, otherValue) {
			if (otherKey) this.apiParams[otherKey] = otherValue
			this.apiParams.page = 1
			this.getPageData()
		},
		checkboxChange(item, index, checked) {
			const key = this.props.key
			this.$emit('input', this.selectKey)
			if (checked) {
				this.selectTitle.push(item)
			} else {
				this.selectTitle.splice(
					this.selectTitle.findIndex((v) => v[key] === item[key]),
					1
				)
			}
			this.selectTitle = this.selectTitle.filter((v) => this.selectKey.includes(v[key]))
			this.$emit('update:valueTitle', this.selectTitle)
		},
		tagClose(item, index) {
			const key = this.props.key
			this.selectTitle.splice(index, 1)
			this.selectKey.splice(this.selectKey.indexOf(item[key]), 1)
			this.$emit('input', this.selectKey)
			this.$emit('update:valueTitle', this.selectTitle)

			if (this.$parent.$options.componentName === 'ElFormItem') {
				this.$parent.$emit('el.form.change', this.selectKey)
			}
		},
		openDialog() {
			if (this.disabled) return
			this.dialogVisible = true
			if (!this.dataList.length) {
				this.getPageData()
			}
		},
		radioChange(item, index, e) {
			this.$emit('input', this.selectKey)

			this.selectTitle = item
			this.$emit('update:valueTitle', this.selectTitle)

			if (this.$parent.$options.componentName === 'ElFormItem') {
				this.$parent.$emit('el.form.change', this.selectKey)
			}
		}
	}
}
</script>
<style lang='scss' scoped>
.dialog-select {
	line-height: 1;
	.dialog-select-input {
		// height: auto;
		// min-height: 36px;
		cursor: pointer;
		display: flex;
		align-items: center;
		line-height: 36px;
		&.disabled {
			background-color: #f5f7fa;
			border-color: #e4e7ed;
			color: #c0c4cc;
			cursor: not-allowed;
		}
	}
}
.select-dialog {
	::v-deep .el-dialog__body {
		padding-bottom: 15px;
		padding-top: 15px;
	}
	.ds-select-item {
		width: 100%;
		margin: 15px 0 0 0 !important;
		height: auto !important;
		display: flex;
		align-items: center;
		&:first-child {
			margin: 0 !important;
		}
		::v-deep .el-checkbox__label {
			display: block;
			flex: 1;
		}
	}
	::v-deep .el-radio {
		padding-bottom: 10px !important;
	}
	.item-wrapper {
		display: flex;
		align-items: center;
	}
}
.ds-scroll {
	margin-top: 15px;
	::v-deep .el-scrollbar__wrap {
		max-height: 550px;
	}
}
</style>
